<template>
  <view class="activity-activity-page">
<!--    项部选项卡-->
    <view class="tab-box" style="width: 300rpx;">
      <u-tabs :list="tabData.list" :is-scroll="false" :current="tabData.current" @change="tabChange"></u-tabs>
    </view>
<!--    活动卡片-->
    <view class="activity-item-box" v-for="(activity,index) in activityDataList" :key="index">
      <u-card @click="activityItemClick(activity)" :border="false" padding="12" :head-border-bottom="false" :foot-border-top="false" :title="activity.title" :sub-title="activity.startTime">
        <view class="" slot="body">
          <view class="activity-image-box">
            <u-image :src="imgUrl(activity.titleUrl)" width="100%" height="300rpx" :border-radius="10"><u-loading slot="loading"></u-loading></u-image>
          </view>
        </view>
        <view class="u-flex u-row-between u-p-20" slot="foot">
          <u-icon name="chat-fill" size="34" color="" :label=" activity.commentCount + ' 评论'"></u-icon>
          <u-icon name="thumb-up-fill" size="34" color="#fcbd71" :label=" activity.starCount + ' 赞'"></u-icon>
          <u-icon name="heart-fill" size="34" color="#fa3534" :label=" activity.enjoyCount + ' 想去'"></u-icon>
        </view>
      </u-card>
    </view>
    <!--加载更多组件-->
    <stULoadmore ref="loadMore" :ready="loadActivityData" @loadmore="loadActivityData"></stULoadmore>

  </view>
</template>

<script>

import ActivityUrl from '../../../../pc/ActivityUrl.js'
import stULoadmore from '../../../../../../../components/common/web/components/app/uni-app/uview/st-u-loadmore/st-u-loadmore.vue'

// 给三个tab起一个名称
let tabAll = 0
let tabSameCity = 1
let tabOnline = 2


export default {
  components: {stULoadmore},
  data() {
    return {

      // 顶部 tab 数据
      tabData: {
        list: [{
          name: '全部',
          count: 0
        }, {
          name: '同城',
          count: 0
        }, {
          name: '线上',
          count: 0
        }],
        current: tabAll
      },
      // 活动查询条件
      dataQuery: {
        current: 1,
      },
      // 已加载的活动数据
      activityDataList: [],
    };
  },
  // 下拉刷新
  onPullDownRefresh(){
    this.refreshActivityData(()=>{uni.stopPullDownRefresh()})
  },
  onReachBottom(){
    this.loadActivityData()
  },
  onLoad(options){
    this.activityId = options.activityId
    // 监听下一个页面发布成功的数据

    uni.$on('activity_commentIncrement',({activityId,num})=>{
      let activity = this.getByActivityId(activityId)
      if (activity) {
        activity.commentCount += num
      }
    })
    uni.$on('activity_enjoyIncrement',({activityId,num})=>{
      let activity = this.getByActivityId(activityId)
      if (activity) {
        activity.enjoyCount += num
      }
    })
    uni.$on('activity_starIncrement',({activityId,num})=>{
      let activity = this.getByActivityId(activityId)
      if (activity) {
        activity.starCount += num
      }
    })
  },
  onUnload() {
    uni.$off('activity_commentIncrement');
    uni.$off('activity_enjoyIncrement');
    uni.$off('activity_starIncrement');
  },
  methods: {
    // tab 切换事件
    tabChange(index) {
      this.tabData.current = index;
      this.refreshActivityData()
    },
    getByActivityId(activityId){
      let r = null
      let filtered = this.activityDataList.filter(item => item.id == activityId)
      if(filtered.length > 0){
        r = filtered[0]
      }
      return r
    },
    // 加载数据
    loadActivityData(refresh,callback){
      if(!refresh && this.$refs.loadMore && !this.$refs.loadMore.canLoad()){
        if(callback){
          callback()
        }
        return
      }
      let query = {
        current: this.dataQuery.current
      }

      this.$http.get(ActivityUrl.getPage1,{params:query}).then(res => {
        if (query.current == 1) {
          this.activityDataList = []
        }
        res.data.records.forEach(item =>{
          this.activityDataList.push(item)
        });
        this.dataQuery.current = res.data.current + 1
        this.$refs.loadMore.loaded(res.data)
      }).catch((error)=>{
        if (error.statusCode == '404') {

          this.$refs.loadMore.setMoreStatus('nomore')
        }else {
          this.$u.toast('抱歉系统出错误了')
          console.error(error)
          this.$refs.loadMore.loadError()
        }
      }).finally(()=>{
        if(callback){
          callback()
        }
      })
    },
    // 刷新
    refreshActivityData(callback=()=>{}){
      this.dataQuery.current = 1
      this.loadActivityData(true,callback)
    },
    // 点击活动项事件，跳转到活动详情
    activityItemClick(activity){
      uni.navigateTo({
        url: '/pages/activity/activityDetail?activityId=' + activity.id
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
